<template>
  <div>
    <!-- 第一个板块-公司介绍 -->
     <page-dec>
      <template v-slot:DescName>{{ our.viewDescTitle }}</template>
      <template v-slot:DescContent>{{ our.viewDescText }}</template>
    </page-dec>
    <div class="introduce-ontent">
      <div class="content-box" v-for="item in jieshao" :key="item.id">
        <!-- 放置图片 -->
        <div class="epimg">
          <img class="img_hover" :src="item.image" alt="" />
        </div>
        <!-- 右边的文字 -->
        <div class="eptext">
          <!-- 标题 -->
          <div class="eptitle">{{ item.title }}</div>
          <!-- 内容 -->
          <div class="epcontent">{{ item.desc }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import pageDec from "@/components/pageDec.vue";
export default {
  components:{pageDec},
  data() {
    return {
      our: "",
      jieshao: "",
    };
  },
  created() {
    this.createData();
  },
  methods: {
    //  页面数据获取
    async createData() {
      const {data:res} = await this.$axios.get('/OfficialWebsite/getPageOfAboutUs')
      if(res.code === 200){
        this.jieshao = res.data.companyIntroduce
        this.our = res.data.viewDesc;
      }else{
        return false
      }
    },
  },
};
</script>

<style lang="scss" scoped>
// img-hover
.img_hover:hover {
  transform: scale(1.2);
}
.introduce-ontent {
  background-color: #f5fbff;
  padding-top:5rem;
  .content-box {
    width: 100%;
    height: 26.875rem;
    margin-top: 5rem;
    box-sizing: border-box;
    display: flex;
    .epimg {
      width: 26.875rem;
      height: 26.875rem;
      box-shadow: 2px 2px 4px #ccc, -2px -2px 4px #ccc;
      background-color: #fff;
      margin-left: 5rem;
      line-height: 26.875rem;
      img {
        width: 100%;
        vertical-align: middle;
      }
    }
    .eptext {
      width: 50%;
      margin-left: 3.125rem;
      margin-right: 5.75rem;
      .eptitle {
        margin-top: 3.125rem;
        font-weight:700;
        font-size: 3rem;
      }
      .epcontent {
        margin-top: 3.125rem;
        font-size: 1.25rem;
      }
    }
  }
  .enterprise:first-of-type{
    margin-top:0;
  } 
}
</style>
